<!--
 * @Author: 偻儸小卒[EdisonLiu_]
 * @Date: 1970-01-01 08:00:00
 * @LastEditors: 偻儸小卒[EdisonLiu_]
 * @LastEditTime: 2020-04-13 13:14:08
 * @Description: 首页
 -->
<template>
  <commonPage :showHeader="true" :header_title="header_title" style="background:#e4f4ff">
    <div class="page_body" slot="page_body">
      <div class="query_page">
        <li>
          <label>
            <popup-picker
              :key="match_select_key"
              :title="title1"
              :data="match_titles"
              v-model="match_checked"
              class="input_text"
              value-text-align="left"
              @on-change="select_match"
            >
            </popup-picker
            ><x-icon class="icon" type="ios-arrow-down" size="30"></x-icon>
          </label>
        </li>
        <li>
          <input
            class="input_text"
            type="text"
            v-model="query_obj.admission_ticket"
            placeholder="请输入您的参赛证号"
          />
        </li>
        <li>
          <input
            class="input_text"
            type="text"
            placeholder="请输入您的姓名"
            v-model="query_obj.realname"
          />
        </li>
        <li>
          <input
            class="input_botton"
            type="button"
            value="成绩查询"
            @click="page_submit"
          />
        </li>
      </div>
    </div>
  </commonPage>
</template>
<script>
import commonPage from "../common/commonPage";
export default {
  name: "score",
  data() {
    return {
      header_title: "成绩查询",
      match_select_key: 0,
      title1: "",
      match_titles: [
        ["请选择赛事活动名称"]
      ],
      match_checked: ["请选择赛事活动名称"],
      query_obj: {
        match_id: 0,
        admission_ticket: "",
        realname: ""
      }
    };
  },
  components: {
    commonPage
  },
  created() {
    let that = this;
    //执行页面数据加载
    that.$axios.all([that.getMatchList(1)]).then(
      that.$axios.spread(function(match_list) {
        console.log(match_list);
        that.match_list = match_list.result.list;
        that.match_titles[0] = ["请选择赛事活动名称"];
        match_list.result.list.forEach(element => {
          that.match_titles[0].push(element.match_name);
        });
        that.match_select_key++;
        // match_titles

        that.show_loading = false;
      })
    );

    this.$wxShare(
      {
        title: "分享标题", // 分享标题
        desc: "分享描述", // 分享描述
        link: window.location.href // 分享链接
        //   debug:true
      },
      function() {
        //分享成功后的回调函数
      }
    );
  },
  methods: {
    select_match(e) {
      let that = this;
      console.log(e[0]);
      that.match_list.forEach(item => {
        //  ["请选择赛事活动名称"]
        if (e[0] == "请选择赛事活动名称") {
          that.query_obj.match_id = 0;
          return;
        }
        if (e[0] == item.match_name) {
          that.query_obj.match_id = item.id;
        }
      });
    },
    getMatchList(init = 0) {
      let that = this;
      let obj = this.$axios({
        url: "match.getMatchList",
        method: "post",
        data: {}
      });

      if (init == 1) {
        return obj;
      } else {
        obj
          .then(res => {
            that.match_list = res.result.list;
          })
          .catch(error => {
            console.log(error);
          });
      }
    },
    page_submit() {
      if (this.query_obj.match_id == 0) {
        this.$toast({
          message: "请选择赛事活动名称！",
          position: "bottom"
        });
        return;
      }
      if (this.query_obj.admission_ticket.trim() == "") {
        this.$toast({
          message: "请输入您的参赛证号",
          position: "bottom"
        });
        return;
      }
      if (this.query_obj.realname.trim() == "") {
        this.$toast({
          message: "请收入您的姓名！",
          position: "bottom"
        });
        return;
      }

      this.$router.push({
        path: "/score/score_detail/index",
        query: this.query_obj
      });
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
.page_body {
  margin: 0 4%;

  div {
    font-size: 0.7rem;

    input {
      font-size: 0.7rem;
    }

    li {
      list-style: none;
      width: calc(100% - 1rem);
      position: relative;
      margin-top: 1.2rem;

      .input_text {
        width: 100%;
        height: 100%;
        border-radius: 10rem;
        height: 3rem;
        line-height: 3rem;
        border: 0;
        padding-left: 1rem;
        background: #fff;
      }

      .input_botton {
        width: calc(100% + 1rem);
        border-radius: 10rem;
        border: 0;
        color: white;
        height: 3rem;
        line-height: 3rem;
        background: #33f;
      }

      .icon {
        position: absolute;
        top: 0.6rem;
        right: 0rem;
        z-index: 10000;
      }
    }
  }
}

.query_group {
  .cell_title {
    color: #7e7e7e;
  }

  .cell_value {
    color: #4c4c4c;
  }

  .match_name {
    color: #4661d6;
    font-size: 0.8rem;
    font-weight: 900;
    margin-top: 0.5rem;
  }
}
</style>
<style lang="stylus" >
.query_group {
  >div {
    background: white;
    border-radius: 0.5rem;

    &:before {
      content: none;
    }
  }
}

.input_text .weui-cell {
  padding: 0;

  .weui-cell__ft:after {
    content: none;
  }
}
</style>
